<section>
  <h4>
    When the value of <code>pageIndex</code> exceeds the maximum page number, enable <code>showTruePageIndex</code> to display the value of
    <code>pageIndex</code>.
  </h4>
  <d-pagination
    [size]="'sm'"
    [total]="pager1.total"
    [(pageSize)]="pager1.pageSize"
    [(pageIndex)]="pager1.pageIndex"
    [canViewTotal]="true"
    [canChangePageSize]="true"
    [canJumpPage]="true"
    [maxItems]="5"
    [showTruePageIndex]="true"
  >
  </d-pagination>
  <h4>
    When the value of <code>pageIndex</code> exceeds the maximum page number, the <code>showTruePageIndex</code> function is disabled and
    only the maximum page number is displayed.
  </h4>
  <d-pagination
    [size]="'sm'"
    [total]="pager1.total"
    [(pageSize)]="pager1.pageSize"
    [(pageIndex)]="pager1.pageIndex"
    [canViewTotal]="true"
    [canChangePageSize]="true"
    [canJumpPage]="true"
    [maxItems]="5"
    [showTruePageIndex]="false"
  >
  </d-pagination>
</section>
<section>
  <h4>Default Mode</h4>
  <div>
    <d-pagination
      [size]="'sm'"
      [total]="pager2.total"
      [(pageSize)]="pager2.pageSize"
      [(pageIndex)]="pager2.pageIndex"
      [canViewTotal]="true"
      [canChangePageSize]="true"
      [canJumpPage]="true"
      [maxItems]="5"
    >
    </d-pagination>
    <d-button bsStyle="stress" circled="true" size="sm" (btnClick)="setTotal(0)">total = 0</d-button>
    <d-button bsStyle="common" circled="true" size="sm" (btnClick)="setTotal(5)">total = 5</d-button>
    <d-button bsStyle="common" circled="true" size="sm" (btnClick)="setTotal(15)">total = 15</d-button>
  </div>
</section>
<section>
  <h4>Simple Mode</h4>
  <div style="margin-bottom: 40px">
    <d-pagination
      [total]="pager3.total"
      [(pageSize)]="pager3.pageSize"
      [totalItemText]="'total'"
      [(pageIndex)]="pager3.pageIndex"
      [canViewTotal]="true"
      [canChangePageSize]="true"
      [lite]="true"
    >
    </d-pagination>
    <d-button bsStyle="stress" circled="true" size="sm" (click)="setLiteTotal(0)">total = 0</d-button>
    <d-button bsStyle="common" circled="true" size="sm" (click)="setLiteTotal(20)">total = 20</d-button>
    <d-button bsStyle="common" circled="true" size="sm" (click)="setLiteTotal(30000)">total = 30000</d-button>
    <d-button bsStyle="common" circled="true" size="sm" (click)="setLiteTotal(100000)">total = 100000</d-button>
    <d-button bsStyle="common" circled="true" size="sm" (click)="setIndex(2)">index = 2</d-button>
    <d-button bsStyle="common" circled="true" size="sm" (click)="setIndex(3)">index = 3</d-button>
  </div>
</section>
